import React, { useState, useEffect, useCallback } from 'react';
import { Input } from 'antd';
import 'antd/dist/antd.css';
import requestApi from '../service/block';
import Details from '../components/Details';
import TransactionsTable from '../components/TransactionsTable';
import { awaitWrap } from '../utlis/tools';
import './styles.less';

const Block = () => {
  const [bolckList, setBlockList] = useState([]);
  const [blockVal, setBlockVal] = useState({});

  useEffect(async () => {
    const defaultHash = '00000000000000000007878ec04bb2b2e12317804810f4c26033585b3f81ffaa';
    const [error, response] = await awaitWrap(requestApi.get(`/${defaultHash}`));
    setBlockList(response?.tx);
    setBlockVal(response);
  }, []);

  const handleSearch = useCallback(async (e) => {
    const [error, response] = await awaitWrap(requestApi.get(`/${e.target.value}`));
    setBlockList(response?.tx);
    setBlockVal(response);
  }, []);

  return (
    <div className="block_page">
      <div className="input_box">
        <Input placeholder="Search your transaction, an address or a block" onPressEnter={handleSearch} />
      </div>
      <Details data={blockVal} />
      <TransactionsTable dataSource={bolckList} />
    </div>
  );
};

export default Block;
